<!DOCTYPE html>
<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>RuleApi - 让Typecho更加伟大</title>
    <meta charset="utf-8" />
    <head>
        <style>
            *{padding:0;
                margin:0;
                box-sizing:border-box;}
            html{box-sizing:border-box;}
            body{font-size:15px;
                background:#fff;}
            .main{position:absolute;
                top:20%;
                text-align:center;
                width:100%;}
            .main h1{font-size:70px;
                margin-bottom:5px;}
            .main h1 span{color:#e61f19;}
            .version{color:#999;
                font-size:13px;
                margin-bottom:5px;}
            .links a{text-decoration:none;
                color:#2299DD;
                margin:0px 5px;}
            .install{margin-bottom: 25px}
            .install a{margin:0px 5px;}
            .newVer{color:#999;
                font-size:13px;
                margin-bottom:20px;}
            .newVer a{text-decoration: none;
                color:#2299DD;}
            .install-box{
                position: fixed;
                top: 0px;
                left: 0px;
                z-index: 999;
                width: 100%;
                height: 100vh;
                display: none;
            }
            .install-box.show{
                display: block;
            }
            .install-bg{
                position: fixed;
                top: 0px;
                left: 0px;
                z-index: 888;
                width: 100%;
                background: #000;
                opacity: 0.4;
                height: 100vh;
            }
            .install-main{
                position: fixed;
                top: 25%;
                left: 0px;
                z-index: 888;
                width: 100%;
                padding: 0px 10px;
            }
            .install-concent{
                background: #fff;
                overflow: hidden;
                max-width: 500px;
                height: auto;
                border-radius: 5px;
                margin: 0 auto;
                padding: 0px 20px 20px 20px;

            }
            .install-concent .install-title{
                text-align: center;
                line-height: 60px;
                height: 60px;
                font-size: 17px;
                font-weight: bold;
                margin-bottom: 15px;
            }
            .install-text{
                max-height: 180px;
                overflow: auto;
                min-height: 80px;
            }
            .install-form{
                width: 250px;
                margin: 0 auto;
                overflow: hidden;
                height: 35px;
                border: solid 1px #0f6bac;
            }
            .install-form input{
                display: block;
                border: none;
                outline: none;
                width: 190px;
                height: 35px;
                padding: 0px 10px;
                box-sizing: border-box;
                float: left;
            }
            .install-form button{
                display: block;
                border: none;
                outline: none;
                width: 58px;
                height: 35px;
                padding: 0px 10px;
                box-sizing: border-box;
                float: left;
                background: #0f6bac;
                color: #fff;
            }
            .install-loading{
                text-align: center;
                font-size: 16px;
                padding-top: 15px;
                color: #e61f19;
                font-weight: bold;
            }
            .install-btn{
                text-align: center;
            }
            .install-btn button{
                width: 110px;
                height: 40px;
                background: none;
                color: #333;
                border: none;
                outline: none;
                border-radius: 4px;
                font-size: 15px;
                margin-top: 10px;
            }
            .install-installData{
                width: 100%;
                word-break:break-all;
            }

        </style>
    </head>
<body>
<div id="app">
    <div class="main">
        <h1>Rule<span>Api</span></h1>
        <p class="version">当前版本：V1.2.4 beta</p>
        <p class="newVer">
            最新版本：<a href="javascript:;" @click="toNewVer()">{{newVer}}</a>
        </p>
        <p class="install">
            <a href="javascript:;" style="color:#e54d42;font-weight: bold" @click="toInstall=1">初次安装及更新执行</a>|
            <a href="/system/index.html" style="color:#1276c1;font-weight: bold" target="_blank">可视化配置中心</a>
        </p>
        <p class="links">
            <a href="https://www.ruletree.club/sponsor.html" style="color:#f37b1d;" target="_blank">赞助开发者</a>|
            <a href="https://www.ruletree.club/api/RuleApi.htm#001" target="_blank">接口文档</a>|
            <a href="https://github.com/buxia97/RuleApi" target="_blank">Github</a>|
            <a href="https://www.ruletree.club/tag/RuleApi/" target="_blank">相关教程</a>
        </p>

    </div>
    <div class="install-box" :class="toInstall==1?'show':''">
        <div class="install-bg"></div>
        <div class="install-main">
            <div class="install-concent">
                <div class="install-title">
                    安装及更新
                </div>
                <div class="install-text">
                    <div class="install-form" v-if="isIntall==0">
                        <input type="text" v-model="key" placeholder="请输入访问KEY">
                        <button type="button" @click="Install()">确认</button>
                    </div>
                    <div class="install-loading" v-if="isIntall==1">
                        执行中，请勿关闭或刷新页面
                    </div>
                    <div class="install-installData" v-if="isIntall==2">
                        {{installData}}
                    </div>
                </div>
                <div class="install-btn">
                    <button type="button" @click="closeInstall()">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="system/js/vue.js"></script>
<script src="system/js/axios.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            newVer:"",
            newVerUrl:"",
            toInstall:0,
            isIntall:0,
            key:"",
            installData:""
        },
        created(){
            var that = this;
            that.getConfigAll();
        },
        methods: {
            getConfigAll(){
                var that = this;
                var url = "/system/apiNewVersion"
                axios.get(url,{
                    params:{}
                }).then(function(res){
                    if(res.data.code==1) {
                        var data = res.data.data;
                        that.newVer = data.ruleapiVersion;
                        that.newVerUrl =  data.ruleapiDt;
                    }else{
                        that.newVer = "获取失败";
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            closeInstall(){
                var that = this;
                that.toInstall=0;
                that.isIntall=0;
                that.key="";
                that.installData="";
            },
            Install(){
                var that = this;
                if(that.key==""){
                    return false;
                }
                that.isIntall=1;
                var url = "/install/newInstall?webkey="+that.key
                axios.get(url,{
                    params:{}
                }).then(function(res){
                    that.key="";
                    that.isIntall=2;
                   that.installData = res.data;
                }).catch(function (error) {
                    that.key="";
                    that.isIntall=2;
                    that.installData = "请检查您的浏览器网络";
                });
            },
            toNewVer(){
                var that = this;
                if(that.newVerUrl==""){
                    return false;
                }
                window.open(that.newVerUrl);
            },
        }
    });
</script>
</body>
</html>